<template lang="">
  <div>
    <el-dialog title="商品信息" v-model="showDialog" :width="dialogWidth" :append-to-body="true" :close-on-click-modal="false">
      <el-form label-width="120px" class="baseForm" :rules="rules" :model="form" ref="baseForm">
        <el-form-item label="商品类型" class="item" prop="catetoryId">
          <el-select v-model="form.catetoryId" placeholder="请选择">
            <el-option label="请选择" :value="0"></el-option>
            <el-option v-for="item in types" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="产品编号" class="item" prop="code">
          <el-input v-model="form.code" class="form-input"></el-input>
        </el-form-item>
        <el-form-item label="产品名称" class="item" prop="name">
          <el-input v-model="form.name" class="form-input"></el-input>
        </el-form-item>

        <el-form-item label="单价" class="item" prop="money">
          <el-input v-model="form.money" class="form-input" type="number"></el-input>
        </el-form-item>
        <el-form-item label="单位" class="item" prop="unit">
          <el-input v-model="form.unit" class="form-input" placeholder="请输入容量单位"></el-input>
        </el-form-item>
        <el-form-item label="规格" class="item" prop="spec">
          <el-input v-model="form.spec" class="form-input"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showDialog = false">取 消</el-button>
          <el-button type="primary" @click="saveEdit" :disabled="!allowsave">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
const rules = {
  catetoryId: [
    {
      required: true,
      validator(_, value, callback) {
        if (!value || value <= 0) return callback(new Error('请选择产品类型'))
        callback()
      },
      trigger: 'change',
    },
  ],
  code: [{ required: true, message: '请输入产品编号', trigger: 'blur' }],
  name: [{ required: true, message: '请输入产品名称', trigger: 'blur' }],
  money: [
    {
      required: true,
      validator(_, value, callback) {
        if (value <= 0) return callback('产品单价不正确')
        callback()
      },
      trigger: 'blur',
    },
  ],
  unit: [{ required: true, message: '请输入单位', trigger: 'blur' }],
}
export default {
  data() {
    return {
      showDialog: false,
      dialogWidth: window.innerWidth > 768 ? '768px' : '100%',
      form: {
        catetoryId: 0,
        code: '',
        name: '',
        money: 0,
        spec: '',
      },
      rules,
      types: [],
      allowsave: true,
    }
  },
  methods: {
    show(row) {
      this.allowsave = true
      this.form = Object.assign(
        {
          catetoryId: 0,
          code: '',
          name: '',
          money: 0,
          spec: '',
        },
        row || {}
      )
      this.showDialog = true
    },
    saveEdit() {
      this.$refs.baseForm.validate((v) => {
        if (!v) return
        this.$api.product.update(this.form).then(({ state, msg }) => {
          this.$message[state ? 'success' : 'warning'](msg)
          if (state) {
            this.showDialog = false
            this.$emit('search')
          }
        })
      })
    },
  },
  mounted() {
    this.$api.dictionary.enums(6).then(({ msg }) => {
      this.types = msg
    })
  },
}
</script>
<style lang="scss" scoped></style>
